<template>
  <div class="order-create">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户订单</el-breadcrumb-item>
        <el-breadcrumb-item>创建订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 创建订单表单 -->
    <el-card>
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <el-form :model="orderForm" :rules="rules" ref="orderForm" label-width="100px" class="order-form">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="订单编号" prop="orderNo">
                  <el-input v-model="orderForm.orderNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户订单号" prop="customerOrderNo">
                  <el-input v-model="orderForm.customerOrderNo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户合同" prop="customerContract">
                  <el-select v-model="orderForm.customerContract" placeholder="请选择客户合同" style="width: 100%">
                    <el-option label="2005年 上海超人冷链运输合同" value="2005"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="客户名称" prop="customerName">
                  <el-input v-model="orderForm.customerName" placeholder="请输入客户名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单来源" prop="orderSource" required>
                  <el-select v-model="orderForm.orderSource" placeholder="请选择订单来源">
                    <el-option label="手工录入" value="manual"></el-option>
                    <el-option label="系统导入" value="import"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单类型" prop="orderType" required>
                  <el-select v-model="orderForm.orderType" placeholder="请选择订单类型">
                    <el-option label="运输订单" value="transport"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="运输方式" prop="transportType" required>
                  <el-select v-model="orderForm.transportType" placeholder="请选择运输方式">
                    <el-option label="公路整车" value="truck"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="接单日期" prop="orderDate" required>
                  <el-date-picker
                    v-model="orderForm.orderDate"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否急单" prop="isUrgent">
                  <el-checkbox v-model="orderForm.isUrgent">急单</el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="操作人" prop="operator">
                  <el-input v-model="orderForm.operator" placeholder="请输入操作人"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="订单备注" prop="remark">
                  <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入订单备注"
                    v-model="orderForm.remark">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" @click="submitForm('orderForm')">保 存</el-button>
              <el-button type="success" @click="handleSubmit">提 交</el-button>
              <el-button @click="$router.push('/order/list')">返 回</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="地址信息">
          <el-form :model="addressForm" ref="addressForm" label-width="100px" class="address-form">
            <!-- 提货点信息 -->
            <div class="section-title">提货点信息</div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="发货单位" required>
                  <el-input v-model="addressForm.shipper" placeholder="请输入发货单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系人" required>
                  <el-input v-model="addressForm.shipperContact" placeholder="请输入联系人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话">
                  <el-input v-model="addressForm.shipperPhone" placeholder="请输入电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手机">
                  <el-input v-model="addressForm.shipperMobile" placeholder="请输入手机"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="省" required>
                  <el-select v-model="addressForm.shipperProvince" placeholder="请选择省份">
                    <el-option label="江苏省" value="江苏省"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="市" required>
                  <el-select v-model="addressForm.shipperCity" placeholder="请选择城市">
                    <el-option label="苏州市" value="苏州市"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区县" required>
                  <el-select v-model="addressForm.shipperDistrict" placeholder="请选择区县">
                    <el-option label="昆山市" value="昆山市"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="详细地址" required>
                  <el-input v-model="addressForm.shipperAddress" placeholder="请输入详细地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="取货时间说明">
                  <el-input v-model="addressForm.pickupTime" placeholder="上午9点至12点，下午13点至17点，周末不上班"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 收货点信息 -->
            <div class="section-title">收货点信息</div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="收货单位" required>
                  <el-input v-model="addressForm.receiver" placeholder="请输入收货单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系人" required>
                  <el-input v-model="addressForm.receiverContact" placeholder="请输入联系人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话">
                  <el-input v-model="addressForm.receiverPhone" placeholder="请输入电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手机">
                  <el-input v-model="addressForm.receiverMobile" placeholder="请输入手机"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="省" required>
                  <el-select v-model="addressForm.receiverProvince" placeholder="请选择省份">
                    <el-option label="江苏省" value="江苏省"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="市" required>
                  <el-select v-model="addressForm.receiverCity" placeholder="请选择城市">
                    <el-option label="苏州市" value="苏州市"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区县">
                  <el-select v-model="addressForm.receiverDistrict" placeholder="请选择区县">
                    <el-option label="昆山市" value="昆山市"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="详细地址" required>
                  <el-input v-model="addressForm.receiverAddress" placeholder="请输入详细地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="收货时间说明">
                  <el-input v-model="addressForm.deliveryTime" placeholder="上午9点至12点，下午13点至17点，周末不上班"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="回单类型" required>
                  <el-select v-model="addressForm.receiptType" placeholder="请选择回单类型">
                    <el-option label="电子回单" value="electronic"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" @click="saveAddress">保 存</el-button>
              <el-button type="success" @click="submitAddress">提 交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="货物及费用明细">
          <el-form :model="goodsForm" ref="goodsForm" label-width="100px" class="goods-form">
            <div class="section-title">货物信息</div>
            <el-table :data="goodsForm.items" border style="width: 100%">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="name" label="货物名称"></el-table-column>
              <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
              <el-table-column prop="weight" label="单件重量(千克)" width="120"></el-table-column>
              <el-table-column prop="length" label="长(米)" width="100"></el-table-column>
              <el-table-column prop="width" label="宽" width="100"></el-table-column>
              <el-table-column prop="height" label="高" width="100"></el-table-column>
              <el-table-column prop="volume" label="单件体积" width="100"></el-table-column>
              <el-table-column prop="package" label="包装" width="120">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.package" placeholder="请选择">
                    <el-option label="箱" value="box"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="运输条件" width="120">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.status" placeholder="请选择">
                    <el-option label="正常" value="normal"></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>

            <div style="margin: 10px 0; text-align: right;">
              <span>总数量：{{goodsForm.totalQuantity}} 总重量：{{goodsForm.totalWeight}} 总体积：{{goodsForm.totalVolume}}</span>
              <el-button type="primary" size="small" @click="addGoods">新增</el-button>
              <el-button type="danger" size="small" @click="deleteGoods">删除</el-button>
            </div>

            <div class="section-title" style="display: flex; justify-content: space-between; align-items: center;">
              <span>费用信息</span>
              <el-button type="primary" size="small" @click="calculateByContract">按合同计算</el-button>
            </div>
            <div class="fee-section">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="运费单价">
                    <el-input v-model="goodsForm.freightPrice">
                      <template slot="append">元/千克</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="运费单价">
                    <el-input v-model="goodsForm.freightVolumePrice">
                      <template slot="append">元/立方米</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="运费合计">
                    <el-input v-model="goodsForm.freightTotal" disabled>
                      <template slot="append">元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="提货费">
                    <el-input v-model="goodsForm.pickupFee"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="装卸费">
                    <el-input v-model="goodsForm.handlingFee"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="包装费">
                    <el-input v-model="goodsForm.packagingFee"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="保险费">
                    <el-input v-model="goodsForm.insuranceFee"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="中转费">
                    <el-input v-model="goodsForm.transferFee"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="费用合计">
                    <el-input v-model="goodsForm.totalFee" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="应收合计">
                    <el-input v-model="goodsForm.receivable" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预付款">
                    <el-input v-model="goodsForm.prepayment"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="代收金额">
                    <el-input v-model="goodsForm.collection"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="结算方式">
                    <el-radio-group v-model="goodsForm.paymentMethod">
                      <el-radio :label="1">到货现结</el-radio>
                      <el-radio :label="2">月结</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="银行账户信息">
                    <el-input type="textarea" v-model="goodsForm.bankInfo" :rows="3" 
                      placeholder="收款单位：上海超人电器有限公司&#10;开户行：中国交通银行徐汇支行&#10;账户：989999892348392432"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <el-form-item>
              <el-button type="primary" @click="saveGoods">保 存</el-button>
              <el-button type="success" @click="submitGoods">提 交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderCreate',
  data() {
    return {
      orderForm: {
        orderNo: 'T2016061801',
        customerOrderNo: 'AB001001',
        customerContract: '2005',
        customerName: '上海超人电器有限公司',
        orderSource: 'manual',
        orderType: 'transport',
        transportType: 'truck',
        orderDate: '2016-06-18',
        isUrgent: false,
        operator: '',
        remark: ''
      },
      rules: {
        customerName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        orderSource: [
          { required: true, message: '请选择订单来源', trigger: 'change' }
        ],
        orderType: [
          { required: true, message: '请选择订单类型', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '请选择运输方式', trigger: 'change' }
        ],
        orderDate: [
          { required: true, message: '请选择接单日期', trigger: 'change' }
        ]
      },
      addressForm: {
        shipper: '上海邮乐贸易有限公司',
        shipperContact: '黄学明',
        shipperPhone: '021-65776787',
        shipperMobile: '13989898989',
        shipperProvince: '江苏省',
        shipperCity: '苏州市',
        shipperDistrict: '昆山市',
        shipperAddress: '康林路800号 九方城 A座 1809室 昆山万峰机设备有限公司城北分公司',
        pickupTime: '上午9点至12点，下午13点至17点，周末不上班',
        receiver: '上海洋码头贸易有限公司',
        receiverContact: '朱泽龙',
        receiverPhone: '021-65776787',
        receiverMobile: '13989898989',
        receiverProvince: '江苏省',
        receiverCity: '苏州市',
        receiverDistrict: '',
        receiverAddress: '康林路800号 九方城 A座 1809室 昆山万峰机设备有限公司城北分公司',
        deliveryTime: '上午9点至12点，下午13点至17点，周末不上班',
        receiptType: 'electronic'
      },
      goodsForm: {
        items: [],
        totalQuantity: 0,
        totalWeight: 0,
        totalVolume: 0,
        freightPrice: '',
        freightVolumePrice: '',
        freightTotal: '',
        pickupFee: '',
        handlingFee: '',
        packagingFee: '',
        insuranceFee: '',
        transferFee: '',
        totalFee: '',
        receivable: '',
        prepayment: '',
        collection: '',
        paymentMethod: 1,
        bankInfo: ''
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功')
        } else {
          return false
        }
      })
    },
    addGoods() {
      this.goodsForm.items.push({
        name: '',
        quantity: '',
        weight: '',
        length: '',
        width: '',
        height: '',
        volume: '',
        package: '',
        status: ''
      })
    },
    deleteGoods(index) {
      this.goodsForm.items.splice(index, 1)
    },
    saveGoods() {
      this.$message.success('保存成功')
    },
    submitGoods() {
      this.$message.success('提交成功')
    },
    calculateByContract() {
      // 实现按合同计算的逻辑
      this.$message.success('按合同计算功能尚未实现')
    }
  }
}
</script>

<style scoped>
.order-create {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.order-form {
  padding: 20px;
}

.el-select {
  width: 100%;
}

.el-date-picker {
  width: 100%;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.address-form {
  padding: 20px;
}

.goods-form {
  padding: 20px;
}

.fee-section {
  margin-top: 20px;
}
</style> 